import { TestCase, TestSuite } from '@rnoh/testerino';
import React, { Component } from 'react';
import { Alert, Animated, ScrollView } from 'react-native';
import { View, Text, Colors, ThemeManager } from 'react-native-ui-lib';

const recorderTag = 'title';

ThemeManager.setComponentTheme('Text', (props, context) => {
  if (props.recorderTag === recorderTag) {
    return {
      color: 'blue', // 标签为“title”的文本显示为蓝色
    };
  }
  return {}; // 其他标签/无标签的 Text 保持默认样式
});

class TextScreen extends Component {
  private toggle = false;
  private animatedValue = new Animated.Value(0);



  animate = () => {
    this.toggle = !this.toggle;
    Animated.timing(this.animatedValue, {
      toValue: Number(this.toggle),
      duration: 300,
      useNativeDriver: true,
    }).start();
  };

  renderDivider() {
    return <View height={2} bg-grey60 />;
  }

  render() {
    return (
      <ScrollView>
        <View style={{ paddingBottom: 20 }}>
          <TestSuite name="Text">
            <TestCase itShould="在 Text 组件中设置 recorderTag，关联自定义标签">
              <View>
                <Text recorderTag={recorderTag}>这是一个带标签的标题文本</Text>
                <Text>普通文本（无 recorderTag，样式为默认值）</Text>
              </View>
            </TestCase>

            <TestCase
              itShould="设置animated属性"
              initialState={false}
              arrange={({ setState, reset }) => (
                <View padding-20 centerH>
                  <Text
                    text70
                    animated
                    style={{
                      transform: [
                        {
                          scale: this.animatedValue.interpolate({
                            inputRange: [0, 1],
                            outputRange: [1, 2],
                          }),
                        },
                      ],
                    }}
                    onPress={() => {
                      this.animate();
                      setState(true);
                    }}>
                    Animated Text (press)
                  </Text>
                </View>
              )}
              assert={({ state, expect }) => {
                expect(state).to.be.true;
              }}
            />

            <TestCase itShould="设置center属性">
              <View padding-20>
                <Text center text70 marginB-10>
                  Text
                </Text>
                <Text text70>
                  Text
                </Text>
              </View>
            </TestCase>

            <TestCase itShould="设置color属性">
              <View padding-20>
                <View column marginT-20>
                  <Text text60 color="red">
                    color: red
                  </Text>
                  <Text text60 color="blue">
                    color: blue
                  </Text>
                </View>
              </View>
            </TestCase>

            <TestCase itShould="设置HighlightString属性">
              <View padding-20>
                <Text text100 marginT-20>
                  /* 不设置highlightString属性 */
                </Text>
                <Text text60R>
                  Dancing in The Dark
                </Text>
                <Text text100 marginT-30>
                  /* highlightString属性 'the'
                  */
                </Text>
                <Text
                  text60R
                  highlightString={'the'}
                  highlightStyle={{ color: Colors.yellow30 }}>
                  Dancing in The Dark
                </Text>

              </View>
            </TestCase>

            <TestCase itShould="设置HighlightString，highlightStyle属性">
              <View padding-20>
                <Text text100 marginT-20>
                  /* highlightString属性 'the',不设置highlightStyle属性
                  */
                </Text>
                <Text text60R highlightString={'the'}>
                  Dancing in The Dark
                </Text>
                <Text text100 marginT-30>
                  /* highlightString属性 'the', highlightStyle属性 color: yellow
                  */
                </Text>
                <Text
                  text60R
                  highlightString={'the'}
                  highlightStyle={{ color: Colors.yellow30 }}>
                  Dancing in The Dark
                </Text>

              </View>
            </TestCase>

            <TestCase itShould="设置uppercase属性">
              <View padding-20>
                <Text text70 marginB-10>
                  text
                </Text>
                <Text uppercase text70>
                  text
                </Text>
              </View>
            </TestCase>

            <TestCase itShould="设置underline属性">
              <View padding-20>
                <Text text70 marginB-10>
                  text
                </Text>
                <Text underline text70>
                  text
                </Text>
              </View>
            </TestCase>


          </TestSuite>
        </View>
      </ScrollView>
    );
  }
}

export default TextScreen;
